<template>
	<view class="detalis-box">
		<!-- 商品详情轮播图 -->
		<view class="s-banner"><u-swiper :list="dataInfo.gallery" interval="5000" indicator imgMode="true" indicatorMode="dot" circular :height="200"></u-swiper></view>
		<!-- 商品标题栏 -->
		<view class="detalis-title-box">
			<view class="detalis-title">
				<view class="detalis-brand">
					<u-tag text="天猫旗舰" style="width: 10vh;" type="error" size="mini" shape="circle"></u-tag>
					<view>月销 3万+</view>
				</view>
				<view class="detalis-title-h1">{{ dataInfo.name }}</view>
				<view class="">
					<text style="color: #b3b7be;">{{ dataInfo.brief }}1得4</text>
				</view>
				<view class="detalis-title-price">
					<text class="yj">原价: ￥{{ dataInfo.counterPrice }}</text>
					<text class="xj">现价: ￥{{ dataInfo.retailPrice }}</text>
				</view>
				<view class="popup">
					<u-popup :show="show" @close="close" @open="open">
						<view class="buy-box-top">
							<view class="price">
								<image :src="productList[0].url" style="width: 180rpx; height: 120rpx;"></image>
								<!-- <u--image :showLoading="true" :src="src" width="80px" height="80px" @click="click"></u--image> -->
								<view class="price-num">
									<view class="">价格：￥{{ productList[0].price }}</view>
									<view class="">{{ getCurProduct }}</view>
								</view>
							</view>
							<view class="valueList-box">
								<view class="valueList" v-for="(item, index) in specificationList" :key="index">
									<view class="valueList-p1">{{ item.name }}</view>
									<view class="p1">
										<view
											v-for="(item1, index1) in item.valueList"
											:kye="index1"
											:class="productSpecification[item.name] == item1.value ? 'valueListClick' : 'valueList-p2'"
											@click="shangeClick(item.name, item1.value)"
										>
											<text>{{ item1.value }}</text>
										</view>
									</view>
								</view>
								<view class="">
									数量
									<u-number-box :min="1" :max="100"></u-number-box>
								</view>
							</view>
						</view>

						<u-button type="error" shape="circle" text="确定" @click="getcartAdd"></u-button>
					</u-popup>
					<u-button @click="show = true" class="specifications">
						<view class="">选择规格</view>
						<view class="">></view>
					</u-button>
				</view>
			</view>
			<block>
				<view class="evaluation" v-if="commentList.data == '' ? false : true">
					<view class="Baby-box">
						<u-cell size="large" title="宝贝评价" :value="commentList.count" isLink @click="noGetTO()"></u-cell>
						<view class="Baby">
							<u-button type="error" size="small" text="非常好" shape="circle" class="aaa"></u-button>
							<u-button type="error" size="small" text="买它" shape="circle"></u-button>
							<u-button type="error" size="small" text="值得购买" shape="circle"></u-button>
						</view>
					</view>
					<!-- 商品评价 -->

					<view class="comment" v-for="(item, index) in commentList.data" :key="index">
						<view class="top">
							<view class="left">
								<view class="heart-photo"><image :src="item.avatar" mode=""></image></view>
								<view class="user-info">
									<view class="name">{{ item.nickname }}</view>
									<view class="date">{{ item.addTime }}</view>
								</view>
							</view>
							<view class="right">
								33
								<u-icon v-if="!item.isLike" name="thumb-up-fill" class="like" :size="30" @click="getLike(index)"></u-icon>
							</view>
						</view>
						<view class="content">
							<text class="u-line-2">{{ item.content }}</text>
						</view>
						<u--image :showLoading="true" :src="item.picList" width="180rpx" height="180rpx"></u--image>

						<u-line></u-line>
					</view>
				</view>
			</block>
		</view>

		<!-- 商品参数 -->
		<view class="Product-parameters">
			<view class="parameters-text">
				<view class="parameters-h1">商品参数</view>
				<view class="Product-spe">
					<text class="Product-p">规格</text>
					<text class="Product-g">组合一:AB面独立弹簧床垫</text>
				</view>
				<view class="Product-remind">
					<text class="Product-p">重要提醒</text>
					<text class="Product-g">活动时间:5月8日0点-5月14</text>
				</view>
			</view>

			<view class="imgList" v-html="imgDetail"><block></block></view>
			<view class="problem-box">
				<u-divider text="常见问题"></u-divider>
				<view class="problem-text">
					<view v-for="(item, index) in goodsDetail.issue" :key="index">
						<text class="dian">·</text>
						{{ item.question }}
						<view class="text">{{ item.answer }}</view>
					</view>
				</view>
				<u-divider text="大家想看"></u-divider>
				<view class="newProduct">
					<u-grid :border="false" col="2">
						<u-grid-item v-for="(baseListItem, baseListIndex) in goodsDetail.relatedGoods" :key="baseListIndex" @click="jump(baseListItem.id)">
							<view class="image-box"><image class="_imgs" :src="baseListItem.picUrl" mode=""></image></view>
							<view class="newProduct-text ">
								<text class="newProduct-title">{{ baseListItem.brief }}</text>
								<view class="newProduct-price">{{ baseListItem.counterPrice }}元起</view>
							</view>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
		</view>

		<view class="" style="height: 28px; background-color: #FFFFFF;"></view>
		<!-- 	立即购买 -->
		<view class="goods-nav-box">
			<SubmitBar @buttonClick="buttonClick" @shopping="shopping" :goodscount="goodscount"></SubmitBar>
			<view class="popup">
				<u-popup :show="show1" @close="close" @open="open" :closeable="true">
					<view class="buy-box">
						<view class="buy-box-top">
							<view class="price">
								<image :src="productList[0].url" style="width: 180rpx; height: 120rpx;"></image>
								<view class="price-num">
									<view class="">价格：￥{{ productList[0].price }}</view>
									<view class="">{{ getCurProduct }}</view>
								</view>
							</view>
							<view class="valueList-box">
								<view class="valueList" v-for="(item, index) in specificationList" :key="index">
									<view class="valueList-p1">{{ item.name }}</view>
									<view class="p1">
										<view
											v-for="(item1, index1) in item.valueList"
											:kye="index1"
											:class="productSpecification[item.name] == item1.value ? 'valueListClick' : 'valueList-p2'"
											@click="shangeClick(item.name, item1.value)"
										>
											<text>{{ item1.value }}</text>
										</view>
									</view>
								</view>
								<view class="">
									数量
									<u-number-box v-model="value" :min="1" :max="100"></u-number-box>
								</view>
							</view>
							<u-button type="error" shape="circle" text="确定" @click="getcartAdd"></u-button>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
import SubmitBar from '../../components/SubmitBar/SubmitBar.vue';
export default {
	components: { SubmitBar },
	data() {
		return {
			show: false,
			show1: false,
			closeable: true,
			src: 'https://cdn.uviewui.com/uview/album/1.jpg',
			commentList: [], //评论
			goodsDetail: [], //所有数据
			dataInfo: [], //详情
			specificationList: [], //规格数组
			productList: [], //不同规格商品列表
			productSpecification: {}, //暂存
			curProductID: -1, //当前获取id
			goodscount: 0, //获取商品件
			goodsId: '', //商品id
			value: 1, //数量
			imgDetail: ''
		};
	},

	onLoad(option) {
		// this.getcartAdd(option.id)
		this.goodsDetailClick(option.id);
		
		// this.$get(this.API.goodsDetail, { id: option.id }).then(res => {
		// 	this.goodsDetail = res.data.data;
		// 	this.dataInfo = res.data.data.info;
		// 	this.commentList = res.data.data.comment;
		// 	this.imgDetail = res.data.data.info.detail; //详情图片
		// 	this.imgDetail = this.imgDetail.replace(/<img/g, '<img class="img-list" '); //添加class
		// 	this.specificationList = res.data.data.specificationList; //规格
		// 	this.productList = res.data.data.productList; //不同数组
		// });
	},
	computed: {
		getCurProduct() {
			var arr = [];
			//遍历已选择对象
			for (let key in this.productSpecification) {
				var value = this.productSpecification[key];
				arr.push(value);
			}
			//和productList数据进行对比相同记录ID再转换字符串
			for (var i = 0; i < this.productList.length; i++) {
				var element = this.productList[i];
				if (element.specifications.sort().toString() == arr.sort().toString()) {
					this.curProductID = element.id;
					this.goodsId = element.goodsId;
					console.log('id', this.curProductID);
					console.log(this.goodsId);
					return arr.join(' ');
				}
			}
		},
		cartGoodscount() {
			this.$get(this.API.cartGoodscount).then(res => {
				this.goodscount = res.data.data;
					
			});
		}
	},
	methods: {
		goodsDetailClick(id) {
			this.$get(this.API.goodsDetail, { id: id }).then(res => {
				this.goodsDetail = res.data.data;
				this.dataInfo = res.data.data.info;
				this.commentList = res.data.data.comment;
				this.imgDetail = res.data.data.info.detail; //详情图片
				this.imgDetail = this.imgDetail.replace(/<img/g, '<img class="img-list" '); //添加class
				this.specificationList = res.data.data.specificationList; //规格
				this.productList = res.data.data.productList; //不同数组
			});
		},
		//
		
		//添加商品购物车
		getcartAdd() {
			this.$post(this.API.cartAdd, {
				goodsId: this.goodsId,
				number: this.value,
				productId: this.curProductID
			}).then(res => {
				console.log(res);
				if (res.data.errno == 0) {
					this.show1 = false;
					this.$get(this.API.cartGoodscount).then(res => {
						this.goodscount = res.data.data;
							
					});
					return uni.$u.toast('成功加入购物车');
				} else if (res.data.errmsg == '请登录') {
					uni.navigateTo({
						url: '../center/login'
					});
					return uni.$u.toast('请登录');
				} else if (res.data.errno == 401) {
					return uni.$u.toast('参数不对');
				} else if (res.data.errno == 711) {
					return uni.$u.toast(res.data.errmsg);
				}
			});
		},
		//选择规格弹出框
		open() {
			// console.log('open');
		},
		close() {
			this.show = false;
			this.show1 = false;
		},
		//立即购买导航
		onClick(e) {
			uni.showToast({
				title: `点击${e.content.text}`,
				icon: 'none'
			});
			console.log(e);
		},
		//暂存点击规格数据
		shangeClick(value1, value2) {
			this.productSpecification[value1] = value2;
			console.log(this.productSpecification);
			this.productSpecification = { ...this.productSpecification };
		},

		buttonClick() {},
		//查看全部评价
		noGetTO() {
			uni.navigateTo({
				url: '/pages/productDetails/evaluation'
			});
		},
		//选择规格加入购物车
		shopping() {
			if (this.show1) {
				console.log('zhixin');
			} else {
				this.show1 = true;
			}

			// uni.switchTab({
			// 	url: '/pages/shopping/shopping'
			// });
		},
		//确认订单
		btn() {
			uni.$u.route('/pages/order/createOrder');
		},
		//传id到详情
		jump(index) {
			uni.navigateTo({
				url: '../../pages/productDetails/productDetails?id=' + index
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #e1e1e1;
}
.detalis-box {
	background-color: #e1e1e1;

	.s-banner {
		width: 95vw;
		margin: 0 auto;
	}
	.detalis-title-box {
		.detalis-title,
		.evaluation {
			width: 95vw;
			margin: 0 auto;
			background-color: #ffffff;
			border-radius: 20rpx;
			margin-top: 10rpx;
			&.detalis-title {
				view {
					padding: 10rpx 20rpx;
				}
			}
			.detalis-brand {
				display: flex;
				justify-content: space-between;
			}
			.detalis-title-h1 {
				display: inline-block;
				font-size: 50rpx;
			}
			view {
				padding: 8rpx 0;
			}
			.detalis-title-price {
				.yj {
					margin-right: 20px;
					color: #c0c4cc;
					text-decoration: line-through;
				}
				.xj {
					color: #ffaa00;
				}
			}
			.popup {
				.specifications {
					display: flex;
					justify-content: space-between;
					/* #ifdef APP */
					justify-content: space-between;
					/* #endif */

					border: 0;
				}
			}
		}
		//商品评价
		.evaluation {
			/* #ifdef H5 */
			height: 85vh;
			/* #endif */

			.Baby-box {
				.Baby {
					display: flex;
					.u-button {
						margin: 0 20px;
					}
				}
			}
			.comment {
				padding: 0 30rpx;
				font-size: 32rpx;
				background-color: #ffffff;
				.top {
					display: flex;
					justify-content: space-between;
				}
				.left {
					display: flex;
					.heart-photo {
						image {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
							background-color: #f2f2f2;
						}
					}
					.user-info {
						margin-left: 10rpx;
						.name {
							color: #5677fc;
							font-size: 28rpx;
							margin-bottom: 4rpx;
						}
						.date {
							font-size: 20rpx;
							color: $u-light-color;
						}
					}
				}
				.right {
					display: flex;
					font-size: 20rpx;
					align-items: center;
					color: #9a9a9a;
					.like {
						margin-left: 6rpx;
					}
					.num {
						font-size: 26rpx;
						color: #9a9a9a;
					}
				}
			}
		}
	}

	.Product-parameters {
		width: 100vw;
		// height: 100vh;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;

		.parameters-text {
			padding: 0 40rpx;
			view {
				padding: 20rpx 0;
			}
			.parameters-h1 {
				font-size: 50rpx;
			}
			.Product-spe,
			.Product-remind {
				display: flex;
				justify-content: space-between;
				text {
					padding: 0 20rpx;
				}
				.Product-p {
					color: #8f9298;
				}
				.Product-g {
					width: 60%;
					font-weight: bold;
				}
			}
		}
		/* #ifndef H5 APP */
		/deep/.img-list {
			width: 100vw;
			display: block;
		}
		/* #endif */
		.problem-box {
			.problem-text {
				padding: 0 10rpx;
			}
			.dian {
				font-weight: bolder;
				color: red;
			}
			.text {
				padding: 20rpx;
				font-size: 30rpx;
				color: #c7c7c7;
			}
		}
		.newProduct {
			margin: 50rpx;
			.image-box {
				height: 200rpx;
				._imgs {
					width: 250rpx;
					height: 250rpx;
				}
			}
			.newProduct-text {
				margin: 10px;
				.newProduct-title {
					font-size: 20rpx;
				}
				.newProduct-price {
					font-size: 20rpx;
					color: #f56723;
					text-align: center;
				}
			}
		}
	}
	.buy-box-top {
		.price {
			display: flex;
			align-items: center;
			.price-num {
				padding: 0 20rpx;
			}
		}
		.valueList-box {
			.valueList {
				.p1 {
					display: flex;
				}

				.valueList-p2 {
					padding: 15rpx;
					margin: 10rpx;
					font-size: 20rpx;
					border: 1px solid #2c2c2c;
				}
				.valueListClick {
					border: 1px solid #ff0000;
					padding: 15rpx;
					margin: 10rpx;
					font-size: 20rpx;
					color: red;
				}
			}
		}
	}

	.goods-nav-box {
		position: fixed;
		bottom: 0;
		width: 100vw;

		.buy-box {
			padding: 0 20px;
			height: 600rpx;
			/deep/.u-button {
				margin-top: 20px;
			}
		}
	}
}
</style>
